<template>
	<view class="goods-detail bgc">
		<swiper class="swiper" circular interval="2000" duration="500" :autoplay="false" indicator-color="#ccc"
			indicator-active-color="#fff">
			<swiper-item v-for="(item,i) in swiper" :key="i">
				<image :src="item.src" mode="widthFix" class="swiperPic"></image>
			</swiper-item>
		</swiper>
		<view class="seckill">
			<view class="left">
				<image v-if="cardType == 'mini'" class="title" src="../../static/img/detail_img.png" mode=""></image>
				<image v-if="cardType == 'group'" class="title" src="../../static/img/tuangou.png" mode=""></image>
				<image v-if="cardType == 'menu'" class="title" src="../../static/img/detail-goods.png" mode=""></image>
				<image v-if="cardType == 'jifen'" class="title" src="../../static/img/jifen-detail.png" mode=""></image>
				<view class="price_" v-if="cardType == 'jifen'">
					1000<view class="num">积分</view>
				</view>
				<view class="price" v-else>
					￥<view class="num">99.90</view>
				</view>
			</view>
			<view class="share" v-if="cardType == 'menu'" @tap="showShare">
				<image class="img" src="../../static/img/share.png" mode=""></image>
				<view class="">分享</view>
			</view>
			<view class="end-time" v-if="cardType == 'mini' || cardType == 'group' ">
				<uni-countdown color="#e72e0d" background-color="#fff" :font-size="12" :show-day="false"
					:hour="count_downs.h" :minute="count_downs.m" :second="count_downs.s">
				</uni-countdown>
				<view class="title_">后结束活动</view>
			</view>
		</view>
		<view class="goods-msg">
			<view class="goods-title">
				<view class="card" v-if="cardType == 'mini'">秒杀商品</view>
				<view class="card" v-if="cardType == 'group'">团购商品</view>
				<view class="card" v-if="cardType == 'jifen'">积分商品</view>
				<view class="name">春秋季红色小香风毛衣限时秒杀春秋季红色小香风毛衣限时秒杀春秋季红色小香风毛衣限时秒杀</view>
			</view>
			<view v-if="cardType == 'mini' || cardType == 'menu' " class="msg">已售10件</view>
			<view v-if="cardType == 'group'" class="msg">还差10人拼团成功</view>
			<view v-if="cardType == 'jifen'" class="msg">已兑换10件</view>
		</view>
		<view class="line-content">

		</view>
		<view class="tab-cart">
			<view :class="['tab-item', item.type === activeType ? 'active' : '']" v-for="(item,i) in tabList" :key="i"
				@click="isActive(item.type)">
				{{item.title}}
			</view>
		</view>
		<view class="tab-cart-content">
			<view class="introduce" v-if="activeType == 'introduce'">
				商品介绍
			</view>
			<view class="param" v-if="activeType == 'param'">
				<view class="size" v-for="(item,i) in goodsSize" :key="i">
					<view class="other">{{item.title}}</view>
					<view class="value">{{item.value}}</view>
				</view>
			</view>
			<view class="notice" v-if="activeType == 'notice'">
				<view class="title">预约须知</view>
				<view class="content">
					1、购买商品需全额付款，不可分期。
				</view>
			</view>
		</view>
		<view class="footer" v-if="cardType == 'jifen'">
			<view class="imgs" v-for="(item,i) in footerList_" :key="i" @tap="footerTap(item)">
				<image class="img" :src="item.img_url" mode=""></image>
			</view>
			<view class="btn_jifen">立即兑换</view>
		</view>
		<view class="footer" v-else>
			<view class="imgs" v-for="(item,i) in footerList" :key="i" @tap="footerTap(item)">
				<image class="img" :src="item.img_url" mode=""></image>
			</view>
			<view class="btn" v-if="cardType == 'mini'">立即购买</view>
			<view class="btn" v-if="cardType == 'group'">立即拼团</view>
			<view class="btn_s" v-if="cardType == 'menu'">
				<view class="left-btn" @tap="addCartPopup">加入购物车</view>
				<view class="right-btn" @tap="addBuay">立即购买</view>
			</view>
		</view>
		<!-- 购物车弹窗 -->
		<t-popup :isPopupStatus="isPopupStatus" :isTitle="isTitle" @popupStatus="popupStatus"
			@popupCartStatus="popupCartStatus"></t-popup>
		<!-- 提示弹窗 -->
		<view class="popup-cart" v-if="isPopupCartStatus">
			<image class="img" src="../../static/img/ok.png" mode=""></image>
			<view class="text">
				加入购物车成功，在购物车等你！
			</view>
		</view>
		<!-- 分享弹窗 -->
		<u-popup :show="sharePopup" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="popupClose"
			@open="popupOpen">
			<view class="share_">
				<view class="header-title">
					<view class="line-text">商品分享</view>
				</view>
				<view class="share-methods">
					<view class="share-weixin">
						<image class="img" src="../../static/img/weixin.png" mode=""></image>
						<view class="weixin">微信分享</view>
					</view>
					<view class="share-pic" @tap="picPopupTap">
						<image class="img" src="../../static/img/pic.png" mode=""></image>
						<view class="pic">图片分享</view>
					</view>
				</view>
				<image @tap="sharePopup = false" class="img-close" src="../../static/img/close.png" mode=""></image>
			</view>

		</u-popup>
		<!-- 图片分享弹窗 -->
		<u-popup :show="picPopup" :round="10" mode="bottom" :closeOnClickOverlay="true" @close="popupClose"
			@open="popupOpen">
			<view class="share_">
				<view class="header-title">
					<view class="line-text">商品分享</view>
				</view>
				<image @tap="picPopup = false" class="img-close" src="../../static/img/close.png" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiper: [{
						src: '../../static/img/detail.png'
					},
					{
						src: '../../static/img/detail.png'
					}, {
						src: '../../static/img/detail.png'
					}
				],
				count_downs: {
					h: 12,
					m: 10,
					s: 59
				},
				tabList: [{
						type: 'introduce',
						title: '商品介绍'
					},
					{
						type: 'param',
						title: '商品参数'
					},
					{
						type: 'notice',
						title: '预约须知'
					}
				],
				activeType: 'introduce',
				goodsSize: [{
						title: '商品名称',
						value: '连衣裙'
					},
					{
						title: '材质',
						value: '天蚕丝'
					},
					{
						title: '季节',
						value: '春夏'
					},
					{
						title: '风格',
						value: '时尚修身'
					},
					{
						title: '工艺',
						value: '3D立体剪裁'
					}
				],
				cardType: '',
				footerList: [{
						img_url: '../../static/img/footer.png',
						type: 'home'
					},
					{
						img_url: '../../static/img/footer-cart.png',
						type: 'cart'
					},
					{
						img_url: '../../static/img/footer-ke.png',
						type: 'kefu'
					}
				],
				footerList_: [{
						img_url: '../../static/img/footer.png',
						type: 'home'
					},

					{
						img_url: '../../static/img/footer-ke.png',
						type: 'kefu'
					}
				],
				isPopupStatus: false,
				isTitle: '',
				sharePopup: false,
				picPopup: false,
				isPopupCartStatus: false,
			};
		},
		onLoad() {
			this.cardType = this.$Route.query.from
		},
		methods: {

			changeValue() {

			},
			footerTap(item) {
				if (item.type === 'home') {
					this.$Router.pushTab('/pages/index/index')
				} else if (item.type === 'cart') {
					this.$Router.pushTab('/pages/index/cart')
				}
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				})
			},
			isActive(i) {
				this.activeType = i
			},


			addCartPopup() {
				this.isPopupStatus = !this.isPopupStatus
				this.isTitle = '加入购物车'
			},
			addBuay() {
				this.isPopupStatus = !this.isPopupStatus
				this.isTitle = '立即购买'
			},
			popupStatus(e) {
				this.isPopupStatus = e
			},
			popupCartStatus(e) {
				this.isPopupCartStatus = e
				setTimeout(() => {
					this.isPopupCartStatus = false
				}, 1000)
			},
			picPopupTap() {
				this.sharePopup = false
				this.picPopup = true
			},
			showShare() {
				this.sharePopup = true
			},
			popupOpen() {},
			popupClose() {
				this.sharePopup = false
				this.picPopup = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .uni-countdown__splitor {
		color: #fff !important;
	}

	.bgc {
		background-color: #fff;
	}

	/deep/ .uni-numbox-btns {
		width: 42rpx;
		height: 42rpx;
		border: 1rpx solid #a0a0a0;
		padding: 0;
		background-color: #fff !important;
	}

	/deep/ .uni-numbox__minus {
		border-radius: 5rpx 0rpx 0rpx 5rpx;
	}

	/deep/ .uni-numbox__plus {
		border-top-right-radius: 5rpx;
		border-bottom-right-radius: 5rpx;
	}

	/deep/ .uni-numbox--text {
		font-size: 30rpx;
		color: #545454;
	}

	/deep/ .uni-numbox__value {
		font-size: 24rpx;
		margin: 0;
		width: 78rpx;
		height: 42rpx;
		border-top: 1rpx solid #a0a0a0;
		border-bottom: 1rpx solid #a0a0a0;
		background-color: #fff !important;
	}

	.popup-cart {
		position: fixed;
		bottom: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 460rpx;
		height: 135rpx;
		background-color: #000000;
		opacity: 0.9;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: 20rpx 35rpx 0 35rpx;
		box-sizing: border-box;
		border-radius: 15rpx;
		z-index: 9999;

		.img {
			width: 38rpx;
			height: 38rpx;
			margin-bottom: 20rpx;
		}

		.text {
			font-size: 22rpx;
			letter-spacing: 2rpx;
			color: #ffffff;
		}
	}

	.goods-detail {
		padding-bottom: 200rpx;

		.swiper {
			height: 760rpx;
			width: 100%;
			background-color: #fefefe;

			.swiperPic {
				width: 100%;
				height: 100%;
			}
		}

		.seckill {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-left: 17rpx;
			padding-right: 25rpx;
			height: 90rpx;
			width: 100%;
			background: url('@/static/img/detail_bj.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;

			.left {
				display: flex;
				align-items: center;

				.title {
					width: 66rpx;
					height: 70rpx;
					margin-right: 54rpx;
				}

				.price {
					display: flex;
					align-items: flex-end;
					font-size: 24rpx;
					font-weight: 100;
					color: #ffffff;

					.num {
						margin-left: 6rpx;
						font-size: 36rpx;
						font-weight: bold;
						color: #ffffff;
					}
				}

				.price_ {
					display: flex;
					font-size: 36rpx;
					font-weight: bold;
					color: #ffffff;

					.num {
						margin-left: 6rpx;
						margin-top: 12rpx;
						font-size: 24rpx;
						font-weight: 100;
						color: #ffffff;
					}
				}
			}

			.share {
				display: flex;
				align-items: center;
				flex-direction: column;
				color: #fff;
				font-size: 24rpx;

				.img {
					width: 26rpx;
					height: 26rpx;
					margin-bottom: 5rpx;
				}
			}

			.end-time {
				display: flex;
				align-items: center;

				.title_ {
					margin-left: 11rpx;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 72rpx;
					letter-spacing: 2rpx;
					color: #ffffff;
				}
			}
		}

		.goods-msg {
			margin-top: 27rpx;
			padding-left: 26rpx;

			.goods-title {
				display: flex;
				align-items: center;

				.card {
					display: flex;
					align-items: center;
					background-color: #c60122;
					border-radius: 18rpx;
					font-size: 18rpx;
					letter-spacing: 2rpx;
					color: #ffffff;
					padding: 5rpx 8rpx;
					box-sizing: border-box;
					margin-right: 10rpx;
				}

				.name {
					width: 68%;
					font-size: 30rpx;
					letter-spacing: 3rpx;
					color: #363636;
					//超出一行省略号
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;

				}
			}

			.msg {
				font-size: 20rpx;
				line-height: 72rpx;
				letter-spacing: 2rpx;
				color: #989898;
			}
		}

		.line-content {
			width: 750rpx;
			height: 15rpx;
			background-color: #f5f5f5;
			border-radius: 5rpx;
		}

		.tab-cart {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-bottom: solid 1px #e5e5e5;
			margin: 72rpx 17rpx 0 17rpx;

			.tab-item {
				font-size: 30rpx;
				line-height: 72rpx;
				letter-spacing: 3rpx;
				color: #989898;

				&.active {
					position: relative;
					color: #363636;

					&:before {
						content: '';
						display: block;
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 238rpx;
						height: 3rpx;
						background-color: #c60122;
					}

				}
			}
		}

		.tab-cart-content {
			padding: 0 17rpx;

			.introduce {}

			.param {
				.size {
					display: flex;
					align-items: center;
					border-bottom: 1px solid #e5e5e5;
					padding-left: 30rpx;

					.other {
						width: 20%;
						font-size: 22rpx;
						line-height: 72rpx;
						letter-spacing: 2rpx;
						color: #363636;
					}

					.value {
						width: 60%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 22rpx;
						line-height: 72rpx;
						letter-spacing: 2rpx;
						color: #c60122;
					}
				}
			}

			.notice {
				margin-top: 40rpx;

				.title {
					font-size: 26rpx;
					letter-spacing: 3rpx;
					color: #363636;
				}

				.content {
					font-size: 22rpx;
					line-height: 72rpx;
					letter-spacing: 2rpx;
					color: #989898;
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #f5f5f5;
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #e5e5e5;

			.imgs {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 13%;
				height: 100%;
				border-right: 1px solid #e5e5e5;

				.img {
					width: 36rpx;
					height: 36rpx;
				}

				.img_ {
					width: 32rpx;
					height: 32rpx;
				}

				.img__ {
					width: 32rpx;
					height: 34rpx;
				}
			}

			.btn_jifen {
				width: 560rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-color: #c60122;
				font-size: 30rpx;
				line-height: 72rpx;
				letter-spacing: 3rpx;
			}

			.btn {
				width: 61%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-color: #c60122;
				font-size: 30rpx;
				line-height: 72rpx;
				letter-spacing: 3rpx;
			}

			.btn_s {
				display: flex;
				align-items: center;
				width: 61%;
				height: 100%;

				.left-btn,
				.right-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 234rpx;
					height: 90rpx;
					background-color: #e72e0d;
					font-size: 30rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 72rpx;
					letter-spacing: 3rpx;
					color: #ffffff;
				}

				.right-btn {
					background-color: #c60122;
				}
			}
		}







		.share_ {
			position: relative;
			padding: 38rpx 0 0 0;

			.header-title {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 100rpx;
				border-bottom: solid 1rpx #e5e5e5;

				.line-text {
					position: relative;
					font-size: 32rpx;
					line-height: 72rpx;
					letter-spacing: 3rpx;
					color: #333333;

					&:before {
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						content: '';
						display: block;
						width: 44rpx;
						height: 6rpx;
						background-color: #c60122;
						border-radius: 3rpx;
					}
				}
			}

			.share-methods {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-bottom: 50rpx;

				.share-weixin,
				.share-pic {
					display: flex;
					flex-direction: column;
					align-items: center;

					.img {
						width: 62rpx;
						height: 49rpx;
						margin-bottom: 20rpx;
					}

					.weixin,
					.pic {
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						line-height: 72rpx;
						letter-spacing: 3rpx;
						color: #989898;
					}

				}
			}


			.img-close {
				position: absolute;
				top: 26rpx;
				right: 25rpx;
				width: 32rpx;
				height: 32rpx;
			}


		}
	}
</style>
